<template>
    <div class="box">
        <div class="dv">
            <van-nav-bar title="京东国际">
                <template #left>
                    <van-icon name="arrow-left" size="20" color="#252525" @click="fun1" />
                </template>
                <template #right>
                    <van-icon name="bars" size="26" color="#252525" style="margin-right: 6px" @click="fun2" />
                    <van-icon name="ellipsis" size="26" color="#252525" style="margin-left: 6px" @click="fun" />
                    <div class="box1" v-if="flag">
                        <div class="dv1">
                            <p><van-icon name="home-o" size="17" /></p>
                            <div>首页</div>
                        </div>
                        <div class="dv1">
                            <p><van-icon name="apps-o" size="17" /></p>
                            <div>分类搜索</div>
                        </div>
                        <div class="dv1">
                            <p><van-icon name="cart-o" size="17" /></p>
                            <div>购物车</div>
                        </div>
                        <div class="dv1">
                            <p><van-icon name="contact" size="17" /></p>
                            <div>我的京东</div>
                        </div>
                        <div class="dv1">
                            <p><van-icon name="browsing-history-o" size="17" /></p>
                            <div>浏览记录</div>
                        </div>
                        <div class="dv1">
                            <p><van-icon name="share-o" size="17" /></p>
                            <div>分享</div>
                        </div>
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <van-swipe :autoplay="3000" style="height:140px;width: 94%;margin:auto;margin-top: 10px;border-radius: 20px;">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" style="height:140px" />
            </van-swipe-item>
        </van-swipe>
        <div class="box2">
            <div class="box3" v-for="(v, index) in arr" :key="index">
                <img :src="v.img" alt="">
                <span style=" overflow: hidden; white-space: nowrap;text-overflow: ellipsis;color: #1d1d1d;">{{
                    v.txt3
                }}</span>
                <span style="background:pink;;color:  #f37664;width:50px;margin: 5px 0px;">{{ v.txt }}</span>
                <span
                    style=" overflow: hidden; display: -webkit-box ; text-overflow: ellipsis;-webkit-line-clamp: 3; word-break: break-all; -webkit-box-orient: vertical;color: #888;">{{
                        v.txt1
                    }}</span>
                <span style="color:#888">{{ v.txt2 }}</span>
            </div>
        </div>
        <div class="box4">
            <div class="box5" v-for="(v, index) in arr1" :key="index">
                <img :src="v.img" alt="">
                <span
                    style=" overflow: hidden; display: -webkit-box ; text-overflow: ellipsis;-webkit-line-clamp: 2; word-break: break-all; -webkit-box-orient: vertical;color: #1a1a1a;font-size: 14px;">{{ v.txt }}
                </span>
                <span style="color:#888">十二{{ v.txt1 }}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <van-icon name="good-job-o" />10</span>
            </div>
        </div>
        <div class="kong">

        </div>


    </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
import axios from 'axios';
let service = axios.create()
export default {
    data() {
        return {
            flag: false,
            images: [

            ],
            arr: [],
            arr1: []
        };

    },
    methods: {
        fun() {
            this.flag = !this.flag;
        },
        // 跳转到home页面
        fun1() {
            this.$router.push("/");
        },
        // 跳转到分类页面
        fun2() {
            this.$router.push("/");
        },
    },
    mounted() {
        service({
            url: ' http://localhost:3000/JHswip',
            method: 'get'
        }).then(res => {
            // console.log(res.data)
            this.images = res.data
        }),
            service({
                url: ' http://localhost:3000/JHguoji',
                method: 'get'
            }).then(res => {
                // console.log(res.data)
                this.arr = res.data
            }),
            service({
                url: ' http://localhost:3000/JHguoji2',
                method: 'get'
            }).then(res => {
                // console.log(res.data)
                this.arr1 = res.data
            })

    }
};
</script>

<style scoped>
.box {
    background: #EEE;
}

.box1 {
    width: 125px;
    height: 240px;
    /* background-color: #eee; */
    background-color: black;
    opacity: 0.9;
    border-radius: 5px;
    position: absolute;
    top: 44px;
    right: 10px;
    z-index: 999;
}

.box1 .dv1 {
    display: flex;
    width: 125px;
    height: 40px;
    color: #fff;
    font-size: 14px;
}

.dv1 div {
    border-bottom: 1px solid #eee;
    width: 85px;
    line-height: 40px;
}

.dv1 p {
    width: 40px;
    text-align: center;
}

.box2 {
    width: 94%;
    margin: auto;
    height: 220px;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    justify-content: space-between;
}

.box3 {
    width: 30%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    background: #FFF;
    flex-grow: 0;
    flex-shrink: 0;
    border-right: 3px solid #EEE;
}

.box3 img {
    width: 99px;
}

.box4 {
    width: 94%;
    margin: auto;
    height: 220px;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    justify-content: space-between;
    height: 259px;
}

.box5 {

    width: 40%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    background: #FFF;
    flex-grow: 0;
    flex-shrink: 0;
    border-right: 3px solid #EEE;
}

.box5 img {
    width: 135px;
    height: 180px;
}

.kong {
    height: 1000px;
}
</style>